<template>
  <div>
    <van-list v-model="loading" :finished="finished" @load="onLoad" :error.sync="err" error-text="加载失败，点击这里重试">

      <div class="couponBox" v-for="item in couponList" :key="item.coupon_id">
        <div class="left">
          <div class="discount">￥{{ parseInt(item.discount) }}</div>
          <div class="fullmoney">满{{ parseInt(item.fullmoney) }}元可用</div>
        </div>
        <div class="right">
          <div class="name">{{ item.coupon_name }}</div>

          <div class="time">
            {{ getTime(item.use_stime * 1000) }}
            -
            {{ getTime(item.use_etime * 1000) }}
          </div>
          <router-link to="/" tag="div">
            <van-button>立即使用</van-button>
          </router-link>

        </div>
      </div>

    </van-list>
    <van-empty description="暂无优惠券" v-if="couponList.length==0" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      finished: true,
      err: false,
      couponList: [],
      page: 1,
      data: [
        {
          coupon_id: 1,
          coupon_name: "消费吧xxsb",
          type: 2,
          discount: 10,
          fullmoney: 100,
          send_stime: 1665590400,
          send_etime: 1668355199,
          add_time: 1666424507,
          status: 1,
          use_stime: 1665590400,
          use_etime: 1668355199,
          coupon_number: 0,
          admin_id: 3,
          shop_id: 0,
          update_time: 1666407669,
          is_del: 1,
          is_get: 1,
        },
        {
          coupon_id: 3,
          coupon_name: "消费吧",
          type: 2,
          discount: 10,
          fullmoney: 100,
          send_stime: 1665590400,
          send_etime: 1673020799,
          add_time: 1665656933,
          status: 1,
          use_stime: 0,
          use_etime: 0,
          coupon_number: 123,
          admin_id: 3,
          shop_id: 0,
          update_time: 1665656979,
          is_del: 1,
          is_get: 0,
        },
      ],
    };
  },
  methods: {
    //获取优惠券列表
    onLoad () {
      this.page++
      this.usercouponlist();
    },
    usercouponlist () {
      this.loading = true
      this.$axios
        .get(this.$api.usercouponlist, {
          params: { page: this.page },
        })
        .then((res) => {
          this.loading = false

          if (res.data.code == 1) {
            if (res.data.last_page == res.data.current_page) {
              this.finished = true
            } else {
              this.finished = false
            }
            this.page = Number(res.data.data.current_page)
            this.couponList = this.couponList.concat(res.data.data.data);

          } else {
            this.err = true;
            this.loading = false;
          }
        });
    },
    //转化时间戳
    getTime (time) {

      var now = new Date(parseInt(time)),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return (
        y + "年" + (m < 10 ? "0" + m : m) + "月" + (d < 10 ? "0" + d : d) + "日"
      );
    },
  },

  watch: {},
  created () {
    this.usercouponlist();
  },
  mounted () { },
  computed: {},
};
</script>
<style scoped lang="less">
.couponBox {
  width: 343px;
  height: 114px;
  background: url(../../assets/img/my/myCoupon.png) no-repeat;
  background-size: cover;
  background-position: 100% 100%;
  display: flex;

  justify-content: space-around;
  margin: 0 auto;
  margin-top: 20px;

  box-sizing: border-box;
  align-items: center;
  .left {
    text-align: center;
    width: 129px;
    .discount {
      font-size: 38px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #f33224;
    }
    .fullmoney {
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #d7865f;
    }
  }
  .right {
    // width: 100%;

    color: #d7865f;
    .name {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
    }
    .time {
      font-size: 10px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      margin-top: 4px;
    }
    button {
      margin-top: 14px;
      width: 108px;
      height: 26px;

      background: #f33224;
      border: #f33224 1px solid;
      border-radius: 13px 13px 13px 13px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      text-align: center;
    }
  }
}
</style>
